﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>部门管理</title>
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <script src="~/layui/layui.js"></script>
    <script src="~/lib/jquery/dist/jquery.js"></script>

    <script>
        var $;
        var table;
        var form;
        layui.use(['table', 'dropdown', 'form'], function () {
            $ = layui.$;
            form = layui.form;
            table = layui.table;
            var pageIndex;//存储当前打卡弹出层Id
            // 创建渲染表格实例
            table.render({
                elem: '#test',
                id: "test",
                url: '/DepartMent/getDepartInfo', // 此处为静态模拟数据，实际使用时需换成真实接口
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print', {
                    title: '提示',
                    layEvent: 'LAYTABLE_TIPS',
                    icon: 'layui-icon-tips'
                }],
                page: true,
                limit: 5,
                limits: [3, 5, 10, 20, 50, 100],
                cols: [[
                    { type: 'checkbox', fixed: 'left' },
                    { field: 'DepartmentId', title: '部门编号', sort: true, align: 'center' },
                    { field: 'DepartmentName', title: '部门名称', sort: true, align: 'center' },
                    { field: 'DepartmentCategory', title: '部门类别', sort: true, align: 'center' },
                    {
                        field: 'DepartmentStats', title: '部门状态', align: 'center', templet: function (res) {
                            return res.DepartmentStats ? "禁用" : "可用";
                        }
                    },
                    { fixed: 'right', title: '操作', align: 'center', toolbar: '#barDemo' }
                ]]

            })

            //表头工具栏事件
            table.on('toolbar(test)', function (obj) {
                var id = obj.config.id;
                var checkStatus = table.checkStatus(id);
                switch (obj.event) {
                    //批量删除
                    case 'delAll':
                        var data = checkStatus.data;
                        var ids = [];
                        console.log(data)
                        $.each(data, function (index, item) {
                            ids.push(item.DepartmentId);
                        })
                        if (ids.length == 0) {
                            layer.msg("未选中任何数据", { icon: 0 })
                        } else {
                            layer.confirm('确定要删除吗？', { icon: 3 }, function () {
                                $.ajax({
                                    url: "/DepartMent/Delete",
                                    type: "post",
                                    data: { ids: ids.join(',') },
                                    success: function (res) {
                                        if (res) {
                                            layer.msg("删除成功", { icon: 1 });
                                            tableload();
                                        } else {
                                            layer.msg("删除失败", { icon: 2 });
                                        }
                                    }
                                })
                            }, function () {
                                layer.msg('用户取消操作', { icon: 0 });
                            });
                        }
                        break;

                    //添加
                    case 'add':
                        pageIndex = layer.open({
                            type: 1, // page 层类型
                            area: ['500px', '300px'],
                            title: '添加部门信息',
                            shade: 0.6, // 遮罩透明度
                            shadeClose: true, // 点击遮罩区域，关闭弹层
                            anim: 0, // 0-6 的动画形式，-1 不开启
                            content: $("#divContent"),
                            cancel: function (index, layero, that) {
                                clearForm();
                                layer.close(index);
                                $("#divContent").css("display", "none");
                            }
                        });
                        break;
                }
            });


            //表格内工具栏事件
            table.on('tool(test)', function (obj) {
                var data = obj.data; // 获得当前行数据
                //编辑
                if (obj.event === 'edit') {
                    //给表单赋值
                    form.val("formInfo", {
                        DepartmentId: data.DepartmentId,
                        DepartmentName: data.DepartmentName,
                        DepartmentCategory: data.DepartmentCategory,
                        DepartmentStats: data.DepartmentStats ? "true" : "false"
                    })
                    pageIndex = layer.open({
                        type: 1, // page 层类型
                        area: ['500px', '300px'],
                        title: '添加角色信息',
                        shade: 0.6, // 遮罩透明度
                        shadeClose: true, // 点击遮罩区域，关闭弹层
                        maxmin: true, // 允许全屏最小化
                        anim: 0, // 0-6 的动画形式，-1 不开启
                        content: $("#divContent"),
                        cancel: function (index, layero, that) {
                            clearForm();
                            layer.close(index);
                            $("#divContent").css("display", "none");
                        }
                    });
                } else if (obj.event === 'del') {
                    layer.confirm('确定要删除吗？', { icon: 3 }, function () {
                        $.ajax({
                            url: "/DepartMent/Delete",
                            type: "post",
                            data: { ids: data.DepartmentId },
                            success: function (res) {
                                if (res) {
                                    layer.msg("删除成功", { icon: 1 });
                                    tableload();
                                } else {
                                    layer.msg("删除失败", { icon: 2 });
                                }
                            }
                        })
                    }, function () {
                        layer.msg('用户取消操作', { icon: 0 });
                    });
                }
            });

            //表单提交事件
            form.on('submit(btnSave)', function (data) {
                var field = data.field; // 获取表单字段值
                console.log(field)
                $.ajax({
                    url: "/DepartMent/Save",
                    type: "get",
                    data: field,
                    success: function (res) {
                        if (res) {
                            layer.msg("保存成功!", { icon: 1 });
                            layer.close(pageIndex);
                            $("#divContent").css("display", "none");
                            tableload();
                            clearForm();
                        } else {
                            layer.msg("保存失败!", { icon: 2 });
                        }
                    }
                })
                return false; // 阻止默认 form 跳转
            });

            //查询按钮
            $("#btnSearch").click(function () {
                console.log($("#strName").val())
                tableload();
            });

        })


        //表格重载方法
        function tableload() {
            table.reloadData('test', {
                where: {
                    strName: $("#strName").val(),
                }
            })
        }

        //清空表单
        function clearForm() {
            form.val("formInfo", {
                DepartmentId: 0,
                DepartmentName: "",
                DepartmentCategory: "",
                DepartmentStats: false
            })
        }

    </script>


</head>
<body>
    <div class="content">
        @* 搜索区域 *@
        <div class="search">
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <input type="text" placeholder="请输入部门名称" id="strName" class="layui-input">
                    <div class="layui-input-split layui-input-suffix" style="cursor: pointer;">
                        <i class="layui-icon layui-icon-search" id="btnSearch"></i>
                    </div>
                </div>
            </div>
        </div>

        @* 表格展示区域 *@
        <div class="table">
            <table class="layui-hide" id="test" lay-filter="test"></table>
        </div>

        @* 表格头部 *@
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
              <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
              <button class="layui-btn layui-btn-sm" lay-event="delAll">批量删除</button>
            </div>
        </script>

        @* 操作列 *@
        <script type="text/html" id="barDemo">
            <div class="layui-clear-space">
              <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
              <a class="layui-btn layui-btn-xs" lay-event="del">删除</a>
            </div>
        </script>

        @* 添加/编辑部门信息 *@
        <div id="divContent" style="display:none;">
            <form class="layui-form" lay-filter="formInfo">

                @* 部门名称 *@
                <div class="layui-form-item" style="margin-top:20px;">
                    <label class="layui-form-label">部门名称</label>
                    <div class="layui-input-block">
                        <input type="hidden" name="DepartmentId" />
                        <input type="text" name="DepartmentName" lay-verify="required" placeholder="请输入部门名称" autocomplete="off" class="layui-input" style="width:87%">
                    </div>
                </div>

                @* 部门类别 *@
                <div class="layui-form-item">
                    <label class="layui-form-label">部门类别</label>
                    <div class="layui-input-block">
                        <input type="text" name="DepartmentCategory" lay-verify="required" placeholder="请输入部门类别" autocomplete="off" class="layui-input" style="width:87%">
                    </div>
                </div>

                @* 部门状态 *@
                <div class="layui-form-item">
                    <label class="layui-form-label">部门状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="DepartmentStats" value="false" title="可用" checked>
                        <input type="radio" name="DepartmentStats" value="true" title="禁用">
                    </div>
                </div>
                @* 提交表单 *@
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button type="submit" class="layui-btn" lay-submit lay-filter="btnSave">保存</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
</body>
</html>
